<template>
  <div class="yaoSearch">
    <!-- 搜索 -->
    <van-nav-bar
      fixed
      placeholder
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-search
          placeholder="请输入搜索关键词"
          v-model="value"
          @search="onSearch"
        />
      </template>
    </van-nav-bar>
    <div
      class="container"
      v-if="goodsList.length > 0"
    >
      <van-tabs
        v-model="active"
        @click="changeNum"
      >
        <van-tab title="综合排序">
          <van-card
            class="productCards"
            @click="addCart(item)"
            v-for="item in goodsList"
            :key="item.goodsId"
            :id="item.goodsId"
            :price="item.price"
            :desc="item.brief"
            :title="item.goodsName"
            :thumb="item.bigPic"
          >
          </van-card>
        </van-tab>
        <van-tab title="价格排序">
          <van-card
            class="productCards"
            v-for="item in goodsNewList"
            @click="addCart(item)"
            :key="item.goodsId"
            :id="item.goodsId"
            :price="item.price"
            :desc="item.brief"
            :title="item.goodsName"
            :thumb="item.bigPic"
          >
          </van-card>
        </van-tab>

      </van-tabs>
    </div>
    <van-empty v-else description="没有找到相关商品" />
  </div>
</template>
<script>
import * as http from "@/api/search.js";
import { mapState } from 'vuex'
export default {
  data() {
    return {
      active: 0,
      value: this.$store.state.search.goodsName,
      goodsNewList: [],
      n: 0
    };
  },
  computed: {
    ...mapState('search', ['goodsList'])
  },
  methods: {
    // 搜索
    onClickLeft() {
      this.$router.go(-1);
    },
    addCart(item) {
      const goodInfo = {
        goodsId: item.goodsId,
        price: item.price,
        goodsName: item.goodsName,
        brief: item.brief,
        bigPic: item.bigPic,
      };
      this.$store.commit("cart/getGoodsInfo", goodInfo);
      this.$router.push("/product");
    },
    onSearch() {
      this.getGoodsList();
    },
    changeNum(name) {
      this.goodsNewList = this.goodsList.slice(0)
      if (name == 1) {
        this.n++
        if (this.n > 1) {
          this.n = 0
          this.goodsNewList.sort((a, b) => {
            return b.price - a.price
          })
        } else {
          this.goodsNewList.sort((a, b) => {
            return a.price - b.price
          })
        }
      }


    },
    //网络请求数据
    async getGoodsList() {
      var res = await http.getGoodsList(this.value);
      this.$store.dispatch('search/getGoodsList', res)
    },
  },
  created() {
    this.getGoodsList();
    this.changeNum()
  },
};
</script>
<style lang="scss">
.yaoSearch {
  .van-tabs__wrap {
    margin-top: 40px;
  }
  .productCards {
    .van-card__title {
      font-size: 14px;
      color: #000;
    }
    .van-card__price {
      color: red;
    }
  }
}
</style>
